<template>
  <div id="iap-dialog">
    <el-dialog
    :title="title"
    :visible.sync="isDialogShow"
    width="900px"
    :custom-class="custClass"
    :append-to-body="isNest"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    @close="closeDialog">
      <slot name="dialog-head"></slot>
      <happy-scroll class="hy-scroll-box" resize hide-horizontal>
        <slot name="dialog-cont"></slot>
      </happy-scroll>
      <slot name="dialog-btns"></slot>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: 'iDialog',
  props: {
    title: {
      type: String,
      default: ''
    },
    name: {
      type: String,
      default: ''
    },
    isVisible: {
      type: Boolean,
      default: false
    },
    isNest: {
      type: Boolean,
      default: false
    },
    custClass: {
      type: String,
      default: ''
    }
  },
  watch: {
    isVisible: {
      handler: function (val) {
        this.isDialogShow = val
      },
      deep: true
    }
  },
  data () {
    return {
      isDialogShow: false
    }
  },
  methods: {
    closeDialog () {
      let name = this.name
      this.$emit('close', name)
    }
  },
  created () {
    this.isDialogShow = this.isVisible
  }
}
</script>
<style lang="stylus">
#iap-dialog
  #iap-toolbar
    padding 20px 0
  .dialogForm
    .el-row
      width 100%
    .el-form-item__label
      float none
      display block
      text-align left
    .el-select
      display block
      margin 0
    .el-date-editor
      width:100%!important
  .dataTable
    img
      display block
      width 30px
      height 30px
  .form-buttons
    padding 20px 0 10px
    text-align right
.el-dialog__wrapper
  max-height 100%
  overflow hidden
  .el-dialog
    margin-top 0!important
    top 50%
    transform translate(0, -50%)
  .el-dialog__body
    padding 20px
    overflow hidden
.hy-scroll-box
  .happy-scroll-container
    width 100%!important
    height auto!important
    max-height 400px
    .happy-scroll-content
      display block
</style>
